<template>
  <div>
    <a-card title="出库单查询">
      <a-form :model="queryParam" layout="inline">
        <a-form-item label="仓库" v-bind="validateInfos.warehouseId">
          <warehouse-selection :preload="true" @warehouseSelected="warehouseSelected" />
        </a-form-item>
        <a-form-item label="客户" v-bind="validateInfos.customerId">
          <customer-selection :preload="true" @customerSelected="customerSelected" />
        </a-form-item>
        <a-form-item label="状态">
          <a-select v-model:value="queryParam.status" style="width: 80px" placeholder="选择状态">
            <a-select-option value="NEW">新建</a-select-option>
            <a-select-option value="DONE">完成</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item>
          <a-button type="primary" html-type="submit" @click="query">查询</a-button>
        </a-form-item>
        <a-form-item>
          <a-button @click="reset">重置</a-button>
        </a-form-item>
      </a-form>
    </a-card>
    <a-divider style="border-color: #7cb305" dashed />
    <a-card title="查询结果">
      <a-table
        :columns="columns"
        :data-source="resultDataSet"
        rowKey="uid"
        :pagination="paginationConfig"
      >
        <template #action="{ record }">
          <a-button style="margin-right: 10px" @click="edit(record.uid)">修改</a-button>
          <a-button v-if="record.status == 'NEW'" type="danger" @click="finish(record.uid)"
            >完成
          </a-button>
        </template>
        <template #status="{ record }">
          <span v-if="record.status == 'NEW'">新建</span>
          <span v-if="record.status == 'DONE'">完成</span>
        </template>
      </a-table>
    </a-card>
  </div>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'

import { useDeliveryOrderListFunctions } from '@/views/wms/delivery/list/index'
import CustomerSelection from '@/components/chunfeng/customer/CustomerSelection.vue'
import WarehouseSelection from '@/components/chunfeng/warehouse/WarehouseSelection.vue'

const {
  queryParam,
  resultDataSet,
  query,
  columns,
  reset,
  edit,
  finish,
  validateInfos,
  customerSelected,
  warehouseSelected,
} = useDeliveryOrderListFunctions()

const paginationConfig = reactive({
  showSizeChanger: true,
})
</script>
